<template>
  <div class="app-container">

    <el-steps :active="activeName">
      <el-step title="变压器建模"></el-step>
      <el-step title="电流过载故障仿真"></el-step>
      <el-step title="油道堵塞故障仿真"></el-step>
      <el-step title="特征点提取"></el-step>
      <el-step title="故障反演"></el-step>
      <el-step title="故障点预测结果展示"></el-step>
    </el-steps>

    <el-steps :space="500" :active="active" finish-status="success" style="margin:100px 350px">
      <el-step v-for="(step, index) in steps" :key="index" :title="step.title"></el-step>
    </el-steps>

    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>

    <el-row style="margin-top: 50px">
        <e-charts class="chart" :option="temperature"></e-charts>
    </el-row>

    <el-tabs v-model="activeTab" @tab-click="handleClick" style="margin-top: 50px">
      <el-tab-pane label='故障量' name='error'></el-tab-pane>
      <el-tab-pane label='访问量' name='visit'></el-tab-pane>
    </el-tabs>

    <el-row>
        <e-charts class="chart" :option="currentChartOption"></e-charts>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      activeName: 0,
      active: 0,
      steps: [
        { title: '已完成' },
        { title: '进行中' },
        { title: '未完成' },
        { title: '未完成' },
        { title: '未完成' },
        { title: '未完成' }
      ],
      activeTab: 'error',
      temperature: {
        title: {
          text: '变压器油温测试'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['顶层油温', '底层油温']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', 
          '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '顶层油温',
            type: 'line',
            data: [320, 232, 201, 234, 190, 130, 110, 123, 321, 145, 234, 423, 231, 124, 324]
          },
          {
            name: '底层油温',
            type: 'line',
            data: [120, 332, 301, 134, 290, 230, 210, 123, 145, 237, 345, 374, 131, 223, 435]
          }
        ]
      },
      chartOptions: {
        error: {
          title: {
            text: '反演故障数量统计'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['10月', '11月', '12月', '01月', '02月', '03月', '04月',
                      '05月', '06月', '07月', '08月', '09月'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '数量',
              type: 'bar',
              barWidth: '60%',
              data: [150, 52, 100, 234, 390, 330, 220, 135, 60, 200, 329, 231]
            }
          ]
        },
        visit: {
          title: {
            text: '访问量统计'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['10月', '11月', '12月', '01月', '02月', '03月', '04月',
                      '05月', '06月', '07月', '08月', '09月'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '数量',
              type: 'bar',
              barWidth: '60%',
              data: [123, 59, 213, 304, 204, 230, 120, 135, 249, 200, 139, 231]
            }
          ]
        }
      }
    };
  },
  computed: {
    currentChartOption() {
      return this.chartOptions[this.activeTab];
    }
  },
  methods: {
    handleClick(tab) {
      this.activeTab = tab.name;
    },
    next() {
      if(this.activeName + 1 < 7) {
        this.activeName++;
      } else {
        this.activeName = 0;
      }
      if (this.active + 1 < this.steps.length) {
        this.active++;
      } else {
        this.active = 0;
      }
    }
  }

};
</script>

<style scoped lang="scss">
.chart {
  height: 400px;
}
</style>